<!-- 钱包充值 -->
<template>
  <div class="Wallet">
    <!-- 顶部导航栏 吸顶 -->
    <van-sticky>
      <van-nav-bar title="我的零钱">
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
        <template #right>
          <router-link to="/bill">账单</router-link>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div>
      <div class="avatar">
        <van-image width="100px" height="100px" :src='avatar'/>
      </div>
      <div class="name">{{nickname}}</div>
      <div class="balance">
        <div>零钱余额（元）</div>
        <div>{{remainingSum.toFixed(2)}}</div>
      </div>
      <div class="recharge">
        <span>充值</span>
        <span>限时充值特惠</span>
        <van-icon name="arrow" color="#EA592B"/>
        <table border="0" cellspacing=10>
          <tbody>
            <th :class="{ active:active === 10 }" @click="select(10)">充10元</th>
            <th :class="{ active:active === 20 }" @click="select(20)">充20元</th>
            <th :class="{ active:active === 30 }" @click="select(30)">充30元</th>
          </tbody>
          <tbody>
            <th :class="{ active:active === 50 }" @click="select(50)">
              <div>充50元</div>
              <div class="fs10">送5元</div>
            </th>
            <th :class="{ active:active === 100 }" @click="select(100)">
              <div>充100元</div>
              <div class="fs10">送10元</div>
            </th>
            <th :class="{ active:active === 200 }" @click="select(200)">
              <div>充200元</div>
              <div class="fs10">送20元</div>
            </th>
          </tbody>
        </table>
      </div>
      <van-button round block color="#FF5B04" @click="submit"><span>去充值</span></van-button>
    </div>

    <!-- 付款弹窗 -->
    <van-dialog v-model="show" title="付款确认" show-cancel-button @confirm="buy" @cancel="notBuy" class="popup">
      <div class="introduction">请扫描下面二维码进行支付</div>
      <div class="introduction">充值金额: <span>¥{{ active.toFixed(2) }}</span> </div>
      <img src="../assets/alipay.png"/>
      <div> 温馨提示: 演示商品 请勿购买</div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
import { mapState } from "vuex";
export default {
  data(){
    return{
      active: 0,           // 充值特惠选中项
      show: false,         // 付款 订单 弹窗
    }
  },
  computed:{
    ...mapState(["remainingSum","avatar","nickname"]),
  },
  methods:{
    // 选择特惠项
    select(index){
      this.active = index;
    },
    // 提交
    submit(){
      if (this.active) {
        this.show=!this.show;
      } else {
        Toast.fail('选择后才能进行充值哦~');
      }
    },
    // 购买
    buy(){
      Dialog.alert({
        title: '提示',
        message: '充值成功',
        theme: 'round-button',
      });
      let sum = this.active > 30 ? this.active*1.1 : this.active;
      let str = "";
      switch ( this.active ) {
        case 10:
          str = "充值 - 充值10元"
          break;
        case 20:
          str = "充值 - 充值20元"
          break;
        case 30:
          str = "充值 - 充值30元"
          break;
        case 50:
          str = "充值 - 满50送5元优惠"
          break;
        case 100:
          str = "充值 - 满100送10元优惠"
          break;
        case 200:
          str = "充值 - 满200送20元优惠"
          break;
      };
      let time = this.$moment(new Date()).format("YYYY年MM月DD日 HH:mm");
      let time1 = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
      let details={
            time:time1,
            commodity:[
              { name:"充值",num:1,price:sum.toFixed(2) },
            ]
          }
      this.$store.commit("addBill", [1,sum,str,time,details]);
      this.$store.commit("addMoney",parseInt(sum));
      this.active = 0;
    },    
    // 未购买
    notBuy(){
      Dialog.alert({
        title: '提示',
        message: '未充值',
        theme: 'round-button',
      })
    },  
    // 返回
    goBack() {
      this.$router.go(-1);
    },
  }
}
</script>

<style lang="scss" scoped>
.Wallet{
  .van-nav-bar {
    background-color: $base-color;
    ::v-deep .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  ::v-deep .van-nav-bar__right{
    a{
      color: #fff;
      font-weight: bold;
    }
  }
  .van-button--block{
    width: calc(100% - 24px);
    margin: 12px;
    .van-button__text{
      font-weight: bold;
    }
  }
  .avatar {
    display: flex;
    justify-content: center;
    margin: 20px 0 10px 0;
  }
  .name{
    text-align: center;
    font-weight: bold;
  }
  .balance{
    background: rgb(253,76,42) ;
    width: calc(100% - 74px);
    height: 100px;
    margin-left:37px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    color:#fff;
    div:nth-child(1){
      font-size: 13px;
      padding-top: 20px;
      margin-left: 11px;
    }
    div:nth-child(2){
      font-size: 45px;
    }
  }
  .recharge{
    span{
      font-weight: bold;
    }
    span:nth-child(1){
      margin-left: 18px;
    }
    span:nth-child(2){
      cursor:pointer;
      background-image:-webkit-linear-gradient(bottom,red,#ff5f60,#f0c41b); 
      background-clip:text; 
      -webkit-text-fill-color:transparent;
      margin-left: 10px;
      font-weight: 400;
    }
    table{
      width: 100%;
      margin: 12px 0;
      padding: 0 12px;
      tbody{
        background-color: #FBFBFB;
        th{
          border-radius: 10px;
          font-weight: bold;
          padding: 13px;
          height: 37px;
        }
      }
    }
  }
  .active{
    color: #FF5B04;
    background: oldlace;
  }
  .popup{
    font-weight: bold;
    ::v-deep .van-dialog__header{
      font-weight: bold;
    }
    .introduction{
      text-align: center;
      margin-top: 5px;
      font-weight: 500;
      span{
        color: red;
        font-weight: bold;
      }
    }
    img{
      width: 50%;
      margin: 5px 0 5px 25%;
    }
    div:last-child{
      margin-bottom: 5px;
      text-align: center;
      font-size: 12px;
      color: coral;
    }
  }
}
</style>